<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :ellipsis="false">
          <el-menu-item index="1">
            STEDU-在线商城
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>{{admin.username}}</template>
            <el-menu-item index="center" @click="adminDialongShow=true">个人中心</el-menu-item>
            <el-menu-item index="chgPwd" @click="chgPwdDialongShow=true">修改密码</el-menu-item>
            <el-menu-item @click="logout">退出</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-container>

        <el-aside width="200px">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              :router="true"
              text-color="#fff">
            <el-menu-item index="/admin/index">
              <el-icon><LocationInformation /></el-icon>
              后台首页</el-menu-item>
            <el-sub-menu index="1">
              <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>管理员管理管理</span>
              </template>
                <el-menu-item index="/admin/admin">管理员列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Grid /></el-icon>
                <span>商品分类管理</span>
              </template>
              <el-menu-item index="/admin/category">分类列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Goods /></el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/admin/goods">商品列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><User /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/admin/user">用户列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><List /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/admin/order">订单列表</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main><RouterView /></el-main>
      </el-container>
    </el-container>
  </div>

  <!-- 修改密码模态框开始 -->
  <el-dialog v-model="chgPwdDialongShow" title="修改密码" width="500px">
    <el-form>
      <el-form-item label="旧密码" label-width="20%">
      <el-input v-model="chgPwdObj.oldPwd" placeholder="请输入旧密码" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="新密码" label-width="20%">
        <el-input v-model="chgPwdObj.newPwd" placeholder="请输入新密码" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="新密码确认" label-width="20%">
        <el-input v-model="chgPwdObj.newPwd1" placeholder="请确认新密码" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="chgPwdDialongShow=false">取消</el-button>
        <el-button type="primary" @click="chgPwd"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改模态框结束 -->
  <!-- 修改管理员信息对话框开始 -->
  <el-dialog v-model="adminDialongShow" title="修改个人信息" width="500px">
    <el-form>
      <el-form-item label="用户名" label-width="20%">
        <el-input v-model="admin.username" disabled autocomplete="off"/>
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="admin.realname" placeholder="确认你的真实姓名" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="admin.phone" placeholder="请输入新电话号" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="admin.email" placeholder="请输入新邮箱" autocomplete="off"/>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="adminDialongShow=false">取消</el-button>
        <el-button type="primary" @click="chgInfo"> 确认修改</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改模态框结束 -->

</template>

<script setup>

import { RouterView} from "vue-router";
import {useTokenStore} from "@/stores/token.js";
import {ref} from "vue";
import router from "@/router/index.js";
import adminApi from "@/api/adminApi.js";
import {ElMessage} from "element-plus";
const tokenstore=useTokenStore();
//管理员信息
const admin=ref({
  username:null,
  phone:null,
  email:null,
  realname:null
});



//是否显示修改密码的对话框
const chgPwdDialongShow=ref(false);
const adminDialongShow=ref(false);
const chgPwdObj=ref({
  oldPwd:null,
  newPwd:null,
  newPwd1:null
})
//修改密码
function chgPwd(){
  adminApi.chgPwd(chgPwdObj.value)
      .then(resp =>{
        if (resp.code==10000){
          ElMessage.success(resp.msg);
            //重置token并推出
          logout();
        }else {
          ElMessage.error(resp.msg)
        }

      });

}
//修改个人信息
function adminDialong(){
  getInfo();
  adminDialongShow.value=true;
}
function chgInfo(){
  adminApi.chgInfo(admin.value)
      .then(resp =>{
        if (resp.code==10000){
          ElMessage.success(resp.msg);
          adminDialongShow.value=false;
        }else {
          ElMessage.error(resp.msg);
        }
      });
}

//退出重置
function  logout(){
  tokenstore.$reset();
  router.push('/admin/login');
}
//获取已登录用户的信息
function getInfo(){
  adminApi.getInfo()
      .then(resp=>{
     admin.value=resp.data;
  })
}
getInfo();
</script>
<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;

}
.el-header{
  padding: 0;
}
.el-container, .el-menu{
  height: 100%;
}

</style>